<template>
  <div class="WatchVideo">


    <!-- 左大div----------------------------------------------------- -->
    <div class="v_container">

      <!-- 视频标题信息 -->
      <div class="title">
        <div>
          <span>{{ single_video_imfo.title }}</span>
        </div>

        <span> <i class="el-icon-video-camera"></i> 7.5万 &nbsp;&nbsp;
          <i class="el-icon-bank-card"></i> 215 &nbsp;&nbsp;
          <i class="el-icon-time"></i> {{ single_video_imfo.create_time | dateFormat }} &nbsp;&nbsp;
          <i class="el-icon-circle-close"></i> 未经作者授权，禁止转载
        </span>
      </div>

      <!-- 播放器 -->
      <video-player class="v_player" :options="videoOptions" />

      <!-- 点赞收藏 一键三连 -->
      <div class="mytriple" @click="addVideoStart">
        <i class="el-icon-thumb"></i> <span>点击数 {{ single_video_imfo.likes_number }}万</span> &nbsp;&nbsp;
        <i :class="start_class"></i> <span>收藏数 {{ single_video_imfo.starts_number }}万</span> &nbsp;&nbsp;
        <i class="el-icon-paperclip"></i> <span>分享数 {{ single_video_imfo.share_number }}万</span>
      </div>

      <!-- 简介 -->
      <div class="simple_describe">
        <span>
          <strong> 简介：</strong> {{ single_video_imfo.title }}到底是怎么回事呢？{{ single_video_imfo.title }}相信大家都很震惊，
          但是{{ single_video_imfo.title }}到底是怎么回事呢，
          下面就让小编带大家一起了解吧。{{ single_video_imfo.title }}，其实就是(ฅ•﹏•ฅ)，
          大家可能会很惊讶{{ single_video_imfo.title }}呢？
          但事实就是这样，小编也感到非常惊讶。这就是关于{{ single_video_imfo.title }}的事情了，大家有什么想法呢，
          欢迎在评论区告诉小编一起讨论哦！
        </span>
      </div>

      <!-- 评论功能 -->
      <div class="change_comment">
        <!-- 最热/最新 切换 -->
        <div>
          <span>评论</span>
        </div>

        <div>
          <el-menu default-active="1" mode="horizontal">
            <el-menu-item index="1" @click="changeShow('最热')">最热</el-menu-item>
            <el-menu-item index="2" @click="changeShow('最新')">最新</el-menu-item>
          </el-menu>
        </div>
      </div>

      <!-- 发表评论 -->
      <div class="publish_comment">
        <div>
          <img :src="user_avatar" alt="">
        </div>
        <div>
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="请输入内容" v-model="my_comment">
          </el-input>
        </div>
        <div>
          <el-button type="primary" plain @click="sendComment">发送评论</el-button>
        </div>
      </div>

      <!-- 查看评论内容 -->
      <div class="see_comments">
        <div class="comment_item" v-for="item in all_video_comments" :key="item.v_comments_id">

          <div class="ci_img">
            <img :src="item.user_avatar" alt="">
          </div>

          <div class="ci_content">
            <div>{{ item.user_name }} lv.1</div>
            <div>{{ item.comment }}</div>
            <div>{{ item.create_time | dateFormat }} 点赞 &nbsp; <i class="el-icon-circle-check"></i></div>
          </div>

        </div>

      </div>

      <!-- 底部需要高度撑大 ，不然滑动有问题-->
      <div style="height: 200px; width: 100%;">

      </div>

    </div>

    <!-- 右大div--------------------------------------------------- -->
    <div class="v_choose">

      <!-- 作者信息 -->
      <div class="auther_imfo">

        <!-- 头像 -->
        <div class="ai_img">
          <img :src="single_auther_imfo.user_avatar" alt="">
        </div>

        <!-- 信息 -->
        <div class="ai_detail">

          <div class="aid_one">
            <span>{{ single_auther_imfo.user_name }}</span> &nbsp;
            <span> <i class="el-icon-chat-dot-square"></i> 发消息</span>
          </div>

          <div class="aid_two">
            <span>{{ single_auther_imfo.user_signature }}</span>
          </div>

          <div class="aid_three">
            <el-button type="warning" plain>充电</el-button> &nbsp;&nbsp;
            <el-button type="primary">+ 关注 8.3万</el-button>
          </div>
        </div>
      </div>

      <!-- 视频选集 -->
      <div class="video_collection">
        <div class="vc_title">
          <div><span>视频选集(1/20)<i class="el-icon-film"></i></span></div>

          <div>
            <span>自动连播</span>
            <el-switch v-model="continu_play">
            </el-switch>
          </div>
        </div>

        <!-- 选集内容 -->
        <div class="vc_container">
          <div>
            <span>P1 我是一条视频选集</span>
          </div>
          <div>
            <span>P2 一条安静的视频选集</span>
          </div>
          <div>
            <span>P3 未完成的视频选集</span>
          </div>
          <div>
            <span>P4 我是两条视频选集</span>
          </div>
          <div>
            <span>P5 我是三条视频选集</span>
          </div>
        </div>
      </div>

      <!-- 推荐视频 -->
      <div class="water_item">
        <!-- 封面 -->
        <div class="fengmian">
          <img src="../../assets/picture/fengmian.webp">
        </div>

        <!-- 信息 -->
        <div class="water_item_imfo">
          <!-- 头像 -->
          <div class="auther_img">
            <img src="../../assets/picture/_r.jpg" alt="">
          </div>
          <!-- 标题，作者名，播放数 -->
          <div class="auther_text">
            <div class="auther_title">『深夜2時、レトロで大人な世界に迷い込む』Lofi Chill Bgm</div>
            <div class="auther_name">来自：Microsoft 365</div>
            <div class="auther_name">26万次观看·3天前</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
// 导入配置好的videoJS播放器组件
import VideoPlayer from '@/components/video/VideoPlayer.vue';
import Vue from 'vue';

export default {
  name: 'WatchVideo',
  components: {
    VideoPlayer
  },
  data() {
    return {
      // 收藏按钮 样式切换
      start_class: "el-icon-star-off",
      // videoJS m3u8播放器
      videoOptions: {
        fluid: true,
        // autoplay: true,
        controls: true,
        sources: [
          // {
          //   src: require("@/assets/video/测试视频.mp4"),
          //   type: 'application/x-mpegURL'
          // },
          {
            src: require("@/assets/video/测试视频.mp4"),
            type: 'video/mp4'
          }
        ]
      },
      // 连续播放，自动续播
      continu_play: true,
      // 评论内容
      my_comment: '',
      // 当前视频的id号
      video_id: this.$route.query.video_id,
      // 挂载时，网络请求获得的视频记录信息
      single_video_imfo:
      {
        "video_id": 1,
        "auther_id": 1,
        "auther_name": "admin",
        "auther_avatar": "http://localhost:3000/data/_r.jpg",
        "title": "测试视频",
        "cover_img": "http://localhost:3000/data/fengmian.webp",
        "file_address_collection": "http://localhost:3000/data/1687867875893-测试视频.mp4",
        "create_time": "2023-06-27T04:29:17.000Z",
        "tag": "前端",
        "likes_number": 666,
        "starts_number": 888,
        "share_number": 999
      },
      // 挂载时，网络请求获得的作者信息
      single_auther_imfo: {
        "user_id": 2,
        "user_name": "冰镇生鲜",
        "password": "admin",
        "user_avatar": "http://localhost:3000/data/_r.jpg",
        "user_level": "1",
        "user_sex": "男",
        "user_career": "保安",
        "user_signature": "哥只是个传说",
        "user_role": "normal",
        "user_power": "normal"
      },
      // 挂载时，网络请求获得视频相关评论信息
      all_video_comments: [
        {
          "v_comments_id": 1,
          "video_id": 1,
          "user_id": 1,
          "user_name": "admin",
          "user_avatar": "http://localhost:3000/data/_r.jpg",
          "comment": "手持两把锟斤拷，口中疾呼烫烫烫。脚踏千朵屯屯屯，笑看万物锘锘锘",
          "create_time": "2023-06-27T05:27:00.000Z",
          "likes_number": 6
        },
        {
          "v_comments_id": 2,
          "video_id": 1,
          "user_id": 1,
          "user_name": "admin",
          "user_avatar": "http://localhost:3000/data/_r.jpg",
          "comment": "手持两把锟斤拷，口中疾呼烫烫烫。脚踏千朵屯屯屯，笑看万物锘锘锘",
          "create_time": "2023-06-27T05:27:09.000Z",
          "likes_number": 6
        }
      ],
      // 用户个人信息
      user_avatar: window.sessionStorage.getItem("user_avatar"),
      user_id: window.sessionStorage.getItem("user_id"),
      user_role: window.sessionStorage.getItem("user_role"),
      user_name: window.sessionStorage.getItem("user_name"),
    }
  },
  // beforeMount () {
  //   this.getVideoImfoById();
  // },
  mounted () {
    this.getVideoImfoById();
    // this.getAutherImfoById();
    this.getVideoCommentsById();
  },
  methods: {
    // 添加视频收藏 http://localhost:3000/video/addVideoStarts
    addVideoStart () {
      this.$http({
        url: '/video/addVideoStarts',
        params: {
          //键值对
          note_id: 0,
          video_id: this.video_id,
          user_id: this.user_id,
          user_name: this.user_name,
          auther_id: this.single_auther_imfo.user_id,
          auther_name: this.single_auther_imfo.user_name,
          auther_carrer: this.single_auther_imfo.user_career,
          title: this.single_video_imfo.title,
          cover_img: this.single_video_imfo.cover_img
        },
        method: 'post'
      }).then(res => {
        // console.log(res)
        this.$message.success("添加视频收藏成功")
        this.start_class = "el-icon-star-on"
      }).catch(res => {
        console.log(res);
      })
    },

    // 发送评论 http://localhost:3000/video/addVideoComment
    sendComment() {
      this.$http({
        url: '/video/addVideoComment',
        params: {
          //键值对
          video_id: this.video_id,
          user_id: this.user_id,
          user_name: this.user_name,
          user_avatar: this.user_avatar,
          comment: this.my_comment
        },
        method: 'post'
      }).then(res => {
        // console.log(res)
        this.$message.success("发送评论成功")
        // 重新加载视频评论
        this.getVideoCommentsById()
      }).catch(res => {
        console.log(res);
      })
    },

    // 挂载时，网络请求获得的视频记录信息 http://localhost:3000/video/getVideoByID
    getVideoImfoById() {
      this.$http({
        url: '/video/getVideoByID',
        params: {
          //键值对
          video_id: this.video_id
        },
        method: 'post'
      }).then(res => {
        // console.log(res)
        this.$notify({
          title: '成功',
          message: '获取视频记录成功',
          type: 'success'
        });
        // console.log(res)
        this.single_video_imfo = res.data.data[0];

        // 加载完成视频信息后，修改video.js的配置项目
        Vue.set(this.videoOptions.sources, 0, {
          src: this.single_video_imfo.file_address_collection,
          type: 'video/mp4'
        });

        // 防止js异步，最后加载作者信息
        this.getAutherImfoById();
      }).catch(res => {
        console.log(res);
      })
    },

    // 挂载时，网络请求获得的作者信息 http://localhost:3000/mine/getUserImfo
    getAutherImfoById() {
      this.$http({
        url: '/mine/getUserImfo',
        params: {
          //键值对
          user_id: this.single_video_imfo.auther_id
        },
        method: 'post'
      }).then(res => {
        // console.log(res)
        this.$notify({
          title: '成功',
          message: '获取作者信息成功',
          type: 'success'
        });
        this.single_auther_imfo = res.data.data;
      }).catch(res => {
        console.log(res);
      })
    },

    // 挂载时，网络请求获得视频相关评论信息 http://localhost:3000/video/getCommentsByVideoId
    getVideoCommentsById() {
      this.$http({
        url: '/video/getCommentsByVideoId',
        params: {
          //键值对
          video_id: this.video_id
        },
        method: 'post'
      }).then(res => {
        // console.log(res)
        this.$notify({
          title: '成功',
          message: '获取视频评论信息成功',
          type: 'success'
        });
        this.all_video_comments = res.data.data;
      }).catch(res => {
        console.log(res);
      })
    }
  }
}
</script>

<style lang="less" scoped>
.WatchVideo {
  width: 82%;
  height: 100%;
  // min-height: 760px;
  overflow: hidden;

  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  // background-color: antiquewhite;

  display: flex;
}

// 左大div----------------------------------------------
.v_container {
  width: 76%;
  height: auto;
  min-height: 400px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;

  overflow: scroll;

  // background-color: #bdbbfd51;
  // 标题
  .title {
    width: 100%;

    div {
      height: 50px;

      span {
        line-height: 50px;
        font-size: 24px;
        font-weight: 600;
        color: black;
      }
    }

    span {
      display: block;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-weight: 400;
      color: rgb(114, 119, 123);

      i {
        font-size: 20px;
        font-weight: 500;
        color: rgb(51, 53, 55);
      }
    }
  }

  // 播放器
  .v_player {
    width: 100%;
    height: auto;
    margin-bottom: 10px;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;
    overflow: hidden;
  }

  // 一键三连
  .mytriple {
    padding-left: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    line-height: 50px;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    i {
      color: rgb(97, 102, 109);
      text-shadow: rgba(63, 44, 75, 0.1) 0px 1px 1px 1px;
      font-size: 26px;
      font-weight: 700;
    }

    span {
      color: rgb(97, 102, 109);
      text-shadow: rgba(63, 44, 75, 0.1) 0px 1px 1px 1px;
      font-size: 22px;
      font-weight: 500;
    }
  }

  // 简介
  .simple_describe {
    width: 100%;
    height: auto;
    min-height: 60px;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    span {
      color: rgb(24, 25, 28);
      text-shadow: rgba(63, 44, 75, 0.1) 0px 1px 1px 1px;
      font-size: 15px;
      font-weight: 400;
    }
  }

  // 评论功能
  .change_comment {
    padding: 10px;
    // margin-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
    height: auto;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    display: flex;

    // 最热/最新 切换
    div:nth-child(1) {
      height: 50px;
      width: 70px;

      span {
        color: rgb(43, 45, 48);
        text-shadow: rgba(63, 44, 75, 0.1) 0px 1px 1px 1px;
        font-size: 22px;
        font-weight: 500;
      }
    }

    div:nth-child(2) {
      .el-menu {
        background-color: rgba(0, 0, 0, 0);
        border: none;
      }

      .el-menu-item {
        background-color: rgba(0, 0, 0, 0);
        border: none;
      }

      .el-menu-item.is-active {
        border: none;
      }
    }
  }

  // 发表评论
  .publish_comment {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 96px;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    display: flex;

    div:nth-child(1) {
      width: 10%;
      height: 100%;
      position: relative;

      img {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        border: 1px solid #fff;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
      }
    }

    div:nth-child(2) {
      width: 77%;
      height: 100%;

      // background-color: aliceblue;
      .el-textarea {
        width: 100%;
        height: 100%;
      }

      .el-textarea__inner {
        width: 100%;
        height: 100%;
      }
    }

    div:nth-child(3) {
      width: 13%;
      height: 100%;
      position: relative;

      .el-button {
        margin-left: 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  // 查看评论内容
  .see_comments {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    .comment_item {
      width: 100%;
      height: auto;
      min-height: 60px;
      position: relative;

      border-bottom: 0.5px solid #bdbbfd9b;

      display: flex;

      .ci_img {
        // background-color: #5A54F9;
        width: 10%;
        height: auto;

        img {
          width: 45px;
          height: 45px;

          border-radius: 50%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);

          border: 1px solid #fff;
          border-radius: 50%;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
        }
      }

      .ci_content {
        // background-color: #b1afeb;
        width: 90%;
        height: auto;

        div:nth-child(1) {
          padding: 5px;
          width: 100%;
          font-size: 13px;
          font-weight: 500;
          color: #5A54F9;
        }

        div:nth-child(2) {
          padding: 5px;
          width: 100%;
          font-size: 15px;
          font-weight: 400;
          color: rgb(24, 25, 28);
        }

        div:nth-child(3) {
          padding: 5px;
          width: 100%;
          font-size: 13px;
          font-weight: 400;
          color: rgb(148, 153, 160);
        }
      }
    }
  }



}

/* 去除滚动栏，保留滚动效果*/
.v_container::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}


// 右大div------------------------------------------------
.v_choose {
  width: 23%;
  height: auto;
  // margin-left: 10px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;

  // background: rgba(255, 255, 255, 0.4);
  // backdrop-filter: blur(50px);
  // box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  // transition: all 0.3s ease 0s;

  // border-radius: 10px;

  // 作者信息
  .auther_imfo {
    width: 100%;
    height: 110px;
    // background-color: aquamarine;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    display: flex;

    .ai_img {
      width: 25%;
      height: 100%;
      position: relative;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;

        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);

        border: 1px solid #fff;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
      }
    }

    .ai_detail {
      width: 75%;
      height: 100%;

      .aid_one {
        height: 40px;

        span:nth-child(1) {
          line-height: 40px;
          font-size: 20px;
          font-weight: 600;
          color: #5A54F9;
        }

        span:nth-child(2) {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          font-weight: 400;
          color: rgb(114, 119, 123);

          i {
            font-size: 20px;
            font-weight: 500;
            color: rgb(51, 53, 55);
          }
        }
      }

      .aid_two {
        height: 20px;

        overflow: hidden;
        /*超出部分隐藏*/
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
        white-space: nowrap;
        /*规定段落中的文本不进行换行 */
        width: 235px;

        /*需要配合宽度来使用*/
        span {
          line-height: 20px;
          font-size: 14px;
          font-weight: 300;
        }
      }

      .aid_three {
        margin-top: 10px;
        width: 100%;

        .el-button:nth-child(1) {
          // box-sizing: border-box;
          margin: 0;
          padding: 0;
          width: 90px;
          height: 30px;
          line-height: 30px;
        }

        .el-button:nth-child(2) {
          // box-sizing: border-box;
          margin: 0;
          padding: 0;
          width: 110px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }

  // 视频选集
  .video_collection {
    width: 100%;
    height: auto;
    min-height: 60px;

    margin-top: 10px;

    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    // 选集的表头信息
    .vc_title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 0.5px solid #bdbbfd9b;
      position: relative;

      div:nth-child(1) {
        width: 60%;
        padding-left: 5px;
        position: absolute;
        left: 2px;
      }

      div:nth-child(2) {
        width: 40%;
        position: absolute;
        right: 2px;

        .el-switch {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }

    // 选集内容
    .vc_container {
      width: 100%;
      height: 230px;
      overflow: scroll;

      div {
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
      }

      div:nth-child(odd) {
        // background-color: rgb(239, 238, 254);
        background-color: rgb(254, 242, 232);
      }

      div:hover {
        background-color: rgb(239, 238, 254);
      }
    }

    /* 去除滚动栏，保留滚动效果*/
    .vc_container::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }
  }

  // 推荐视频
  .water_item {
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;

    break-inside: avoid; //避免“瀑布流”内部的内容被断开
    width: 100%;
    height: auto;

    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
    transition: all 0.3s ease 0s;

    border-radius: 10px;

    // 封面
    .fengmian {
      img {
        width: 100%;
        height: auto;
        border-radius: 10px;
      }
    }

    // 内容信息
    .water_item_imfo {
      width: 100%;
      height: auto;
      display: flex;

      .auther_img {
        width: 20%;

        // background-color: aquamarine;
        img {
          height: 50px;
          width: 50px;
          border: 1px solid #fff;
          border-radius: 50%;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
        }
      }

      .auther_text {
        width: 80%;
        // background-color: bisque;

        .auther_name {
          color: #606060;
          font-size: 14px;
        }
      }

    }
  }

  .water_item:hover {
    cursor: pointer;

    // transform: scale(1.0005);
    transition-duration: 0.05s;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: all;

    .fengmian {
      filter: contrast(1.15);
    }
  }

}
</style>